<template>
  <div>
    <el-carousel height="300px">
      <el-carousel-item v-for="item in data.carouselData" :key="item.id">
        <img @click="router.push('/front/albumDetail?id=' + item.albumId)" :src="item.img" alt="" style="width: 100%; height: 300px; cursor: pointer; display: block">
      </el-carousel-item>
    </el-carousel>
    <div style="margin: 30px auto; width: 60%">
      <div style="display: flex; grid-gap: 40px">
        <div style="flex: 2">
          <div style="display: flex; align-items: center">
            <div style="flex: 1; font-size: 26px">精选歌单</div>
            <div @click="router.push('/front/playlist')" style="width: 100px; text-align: right; font-size: 16px; color: #666666; cursor: pointer">更多 ></div>
          </div>
          <div style="margin-top: 20px; display: flex; grid-gap: 20px">
            <div style="flex: 1">
              <img :src="data.playFirst.img" alt="" @click="router.push('/front/playlistDetail?id=' + data.playFirst.id)" style="width: 100%; height: 310px; border-radius: 5px; cursor: pointer">
              <div style="margin-top: 5px; font-size: 15px" class="line1">{{ data.playFirst.name }}</div>
            </div>
            <div style="flex: 1">
              <el-row :gutter="20">
                <el-col :span="12" v-for="item in data.playlistData" style="margin-bottom: 10px">
                  <img :src="item.img" @click="router.push('/front/playlistDetail?id=' + item.id)" alt="" style="width: 100%; height: 145px; cursor: pointer; border-radius: 5px; display: block">
                  <div class="line1" style="margin-top: 5px">{{ item.name }}</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div style="flex: 1">
          <div style="display: flex; align-items: center">
            <div style="flex: 1; font-size: 26px">热门专辑</div>
            <div @click="router.push('/front/album')" style="width: 100px; text-align: right; font-size: 16px; color: #666666; cursor: pointer">更多 ></div>
          </div>
          <div style="margin-top: 20px">
            <div style="display: flex; margin-bottom: 20px; background-color: #b1b3b90a; grid-gap: 15px" v-for="item in data.albumData">
              <img :src="item.img" alt="" style="width: 100px; height: 100px; border-radius: 5px; cursor: pointer" @click="router.push('/front/albumDetail?id=' + item.id)">
              <div style="flex: 1; width: 0; padding: 5px">
                <div v-for="(song, index) in item.songs" style="height: 30px; line-height: 30px; font-size: 15px" class="line1"><strong>{{ index + 1}}</strong>. {{ song.singerName }} - {{ song.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 50px">
        <div style="display: flex; align-items: center">
          <div style="flex: 1; font-size: 26px">热门歌手</div>
          <div @click="router.push('/front/singer')" style="width: 100px; text-align: right; font-size: 16px; color: #666666; cursor: pointer">更多 ></div>
        </div>
        <div style="margin-top: 30px">
          <el-row :gutter="20">
            <el-col :span="4" v-for="item in data.singerData" style="margin-bottom: 40px">
              <div style="text-align: center">
                <img :src="item.avatar" alt="" style="width: 140px; height: 140px; border-radius: 50%; cursor: pointer" @click="router.push('/front/singerDetail?id=' + item.id)">
                <div style="font-size: 18px">{{ item.name }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const data = reactive({
  carouselData: [],
  playFirst: {},
  playlistData: [],
  albumData: [],
  singerData: []
})

const loadCarousel = () => {
  request.get('/carousel/selectAll').then(res => {
    if (res.code === '200') {
      data.carouselData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadCarousel()

const loadPlaylistTop5 = () => {
  request.get('/playlist/selectTop5').then(res => {
    if (res.code === '200') {
      if (res.data.length) {
        data.playlistData = res.data
        data.playFirst = res.data[0]
        if (res.data.length > 4) {
          data.playlistData = res.data.slice(1, res.data.length)
        }
      }
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadPlaylistTop5()

const loadAlbumTop3 = () => {
  request.get('/album/selectTop/3').then(res => {
    if (res.code === '200') {
      data.albumData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadAlbumTop3()

const loadSingerTop8 = () => {
  request.get('/singer/selectTop/6').then(res => {
    if (res.code === '200') {
      data.singerData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadSingerTop8()
</script>